<template>
    <!-- 侧边导航 -->
    <div class="sidebar">
        <div class="sidebar_content">
            <div
            class="sidebar_list"
            :class="activeKey == index ? 'active' : ''"
            v-for="(item, index) in sidebarListData"
            :key="item.treeId ? item.treeId : index"
            @click="handleSidebarClick(index, item)"
            >
                <div class="sidebar_title van-ellipsis">{{item.label}}</div>
                <van-image
                fit="cover"
                v-show="isEdit"
                class="sidebar_edit" width="10" height="10"
                :src="require('assets/images/edit.png')"
                @click.stop="handleEditClick(item, index)" />
                <van-image
                fit="cover"
                v-show="isDelete"
                class="sidebar_delete" width="10" height="10"
                :src="require('assets/images/delete.png')"
                @click.stop="handleDeleteClick(item, index)" />
            </div>
        </div>

        <!-- 编辑dialog -->
        <van-dialog
        class="editDialog"
        v-model="editDialogVisible"
        title="编辑文件夹"
        show-cancel-button
        closeOnClickOverlay
        @confirm="handleConfirmClick"
        >
            <van-field v-model="editDialogValue" placeholder="编辑文件夹" />
        </van-dialog>

        

    </div>
</template>

<script>
export default {
    name: 'sidebar',
    props: {
        // 列表数据
        sidebarList: {
            type: Array,
            default: []
        },
        // 是否显示编辑
        isEdit: {
            type: Boolean,
            default: false
        },
        // 是否显示删除
        isDelete: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            activeKey: 0,
            // 编辑dialog
            editDialogVisible: false,
            editDialogValue: '',
            TreeId: 0,
            Index: 0,
            sidebarListData: this.sidebarList,

            
        }
    },
    methods: {
        handleSidebarClick(index, item){
            this.activeKey = index
            this.$emit('activeIndex', index, item)
        },
        // 监听编辑点击事件
        handleEditClick(item, index){
            // console.log(item)
            this.editDialogVisible = true
            this.editDialogValue = item.label
            this.TreeId = item.treeId
            this.Index = index
            // console.log(this.TreeId)
        },
        // 编辑提交事件
        handleConfirmClick(){
            // console.log('提交')
            let NodeName = this.editDialogValue
            let TreeId = this.TreeId
            this.$request({
                method: 'post',
                url: "/api/FavouriteTree/Edit?Token=" + sessionStorage.getItem("mobileToken"),
                data: {
                    NodeName,
                    TreeId
                }
            }).then(({data}) => {
                // console.log(data)
                if(data.code == 200){
                    this.sidebarListData[this.Index].label = NodeName
                    this.$notify({type: 'success', message: data.msg})
                }else{
                    this.$notify(data.msg)
                }
            })
        },
        // 监听删除点击事件
        handleDeleteClick(item, index){
            // console.log(item)
            this.TreeId = item.treeId

            // 删除dialog
            this.$dialog.confirm({
                message: '是否删除该收藏夹?',
            }).then(() => {
                this.$request({
                    method: 'post',
                    url: "/api/FavouriteTree/Delete?Token=" + sessionStorage.getItem("mobileToken"),
                    data: {
                        TreeId: this.TreeId
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.sidebarListData.splice(index, 1)
                        this.$notify({type: 'success', message: data.msg})
                    }else{
                        this.$notify(data.msg)
                    }
                })
                
            })
        },
        
    },
    
    watch: {
        sidebarList(newVal){
            this.sidebarListData = newVal
        },
        editDialogVisible(newVal){
            if(!newVal){
                this.editDialogValue = ''
            }
        }
    }
}
</script>

<style lang="less" scoped>
.editDialog{
    padding: 0 15px;
}
.editDialog /deep/ .van-dialog__header{
    font-size: 15px;
    color: #2a2b2d;
    font-weight: 600;
}
.editDialog /deep/ .van-cell{
    background-color: #f8f8f8;
    font-size: 14px;
    color: #a5aeb7;
}
.editDialog /deep/ .van-dialog__content{
    margin: 15px auto;
}
.editDialog /deep/ .van-button--default{
    font-size: 14px;
    color: #2a2b2d;
}

.sidebar{
    width: 100px;
    height: calc(100vh - 44px -26px - 49px);
    background-color: #f8f8f8;
    overflow-y: auto;
    .sidebar_content{
        width: 100%;
        .sidebar_list{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            background-color: #f8f8f8;
            // border-top: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
            .sidebar_title{
                color: #2a2b2d;
                font-size: 14px;
                max-width: 60px;
            }
            .sidebar_edit{
                margin-left: 5px;
            }
            .sidebar_delete{
                margin-left: 5px;
            }
        }
        .active{
            color: #0099ff;
            background-color: #fff;
            border-right-color: #fff;
            .sidebar_title{
                color: #0099ff;
            }
        }
    }
}
</style>